<template>
    <view class="product-list-item">
        <checkbox-group name="check" @change="changeCheck" class="check">
            <label class="item-left custom-checkbox-box">
                <checkbox class="checkbox-mark" :value="String(productData.ID)" :checked="productData.checked" />
                <custom-checkbox :isSelect="productData.checked"></custom-checkbox>
            </label>
        </checkbox-group>
        <image
            class="product-img"
            v-if="!getAppSet().isHideImg"
            :src="productData.ProductImage ? easyGetImgUrl(productData.ProductImage) : '/static/img/no-img.jpg'"
            @click="goDetail"></image>
        <view class="product-info">
            <view class="product-info-main" @click="goDetail">
                <text class="product-info-title">{{ productData.ProductName }}</text>
                <text class="product-info-desc" v-if="productData.Attribute">{{ productData.Attribute }}</text>
                <view class="product-info-middle">
                    <view class="product-price">
                        <text class="price-text">￥{{ productData.OrgPrice }}</text>
                        <text class="unit-text">/{{ productData.UnitName }}</text>
                    </view>
                    <view class="product-stock">
                        <text>可选：{{ productData.max }}{{ productData.UnitName }}</text>
                    </view>
                </view>
            </view>

            <view class="product-info-bottom">
                <view class="product-info-bottom-right">
                    <view class="product-num custom-num">
                        <vk-data-input-number-box
                            v-model="productData.Number"
                            :min="0"
                            :max="productData.max"
                            :positive-integer="true"
                            @blur="getinputdata"
                            @plus="getinputdata"
                            @minus="getinputdata"
                            :inputType="'digit'"></vk-data-input-number-box>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import customCheckbox from "@/components/common/custom-checkbox.vue"
export default {
    props: {
        productData: {
            type: Object,
            default: {},
        },
        index: {
            type: Number,
            default: null,
        },
    },
    components: {
        customCheckbox,
    },
    data() {
        return {
            numValue: 0,
            imgShow: false,
        }
    },
    mounted() {},
    methods: {
        bindNumChange(e) {
            this.$nextTick(() => {
                if (e < 10) {
                    this.numValue = 0
                } else {
                    this.numValue = e
                }
            })
        },
        minusFn(e) {
            if (e < 10) {
                this.numValue = 0
            } else {
                this.numValue = e
            }
        },
        getinputdata() {
            this.$emit("getinputdata", this.productData.Number, this.index)
        },
        plusFn(e) {
            if (e < 10) {
                this.numValue = 10
            } else {
                this.numValue = e
            }
        },
        openSku() {
            this.$emit("sku", this.productData)
        },
        changeCheck(e) {
            this.$emit("changeCheck", this.productData)
        },
        goDetail() {
            // this.easyGoTo('/pages/product/productDetail')
        },
    },
}
</script>

<style lang="scss">
.product-list-item {
    display: flex;
    flex-direction: row;
    background: $color-white;
    padding: $app-page-padding;
    border-bottom: solid 1rpx $uni-bg-color-grey;
    .item-radio {
        padding: 40rpx 20rpx 0 0;
    }
    .product-img {
        display: flex;
        width: 128rpx;
        height: 128rpx;
        margin-right: $app-page-padding;
    }

    .product-info {
        display: flex;
        flex: 1;
        flex-direction: column;

        .product-info-main {
            display: flex;
            flex: 1;
            flex-direction: column;
        }

        .product-info-title {
            color: $color-black;
            font-size: $font-size-28;
            line-height: 36rpx;
            margin-bottom: 12rpx;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }

        .product-info-desc {
            color: $app-color-text-tip;
            font-size: $font-size-20;
            margin-bottom: 10rpx;
        }

        .product-info-middle {
            display: flex;
            flex-direction: row;
            align-items: center;

            .product-price {
                display: flex;
                flex: 1;
                align-items: center;

                .price-text {
                    color: $color-orange-1;
                    font-size: $font-size-28;
                    font-weight: 700;
                    margin-right: 10rpx;
                }

                .unit-text {
                    color: $app-color-text-tip;
                    font-size: $font-size-20;
                }
            }
        }

        .product-info-bottom {
            margin-top: 20rpx;
            display: flex;
            flex-direction: row;
            flex: 1;
            align-items: center;
            justify-content: flex-end;

            .product-info-bottom-left {
                display: flex;
                flex: 1;
                align-items: center;
            }

            .product-info-bottom-right {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                .product-specs {
                    width: 140rpx;
                    .btn {
                        height: 50rpx;
                    }
                }
            }
        }
    }
}
.check {
    padding-right: 20rpx;
    margin-top: 20rpx;
}
.number-box {
}
</style>
